<template>
  <div>
    <div class="grid grid-cols-6 gap-3">
      <div
        class="relative w-32 h-32 box"
        v-for="(item, key) in state.pics"
        :key="key"
      >
        <el-image class="w-32 h-32" :src="item" fit="cover"></el-image>
        <div
          class="absolute top-0 w-32 h-32 text-center layer"
          style="background-color: rgba(0, 0, 0, 0.2); line-height: 8rem"
        >
          <i
            class="text-lg text-white cursor-pointer el-icon-delete-solid"
            @click="del(item, key)"
          ></i>
        </div>
      </div>
      <div
        v-if="state.pics.length < props.limit"
        class="w-32 h-32 text-center bg-white border border-gray-400 border-solid border-dashed rounded cursor-pointer  handle hover:bg-gray-100"
        style="line-height: 8rem"
        @click="setVisible"
      >
        <i class="text-lg el-icon-plus"></i>
      </div>
    </div>
    <el-dialog title="裁剪并上传图片" v-model="state.visible">
      <div>
        <div>
          <img
            ref="image"
            height="400px"
            v-show="state.image != ''"
            :src="state.image"
          />
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <div class="flex justify-between flex-nowrap">
            <div>
              <el-upload
                action=""
                :auto-upload="false"
                :show-file-list="false"
                :on-change="handleChange"
              >
                <el-button type="warning" icon="el-icon-upload2">
                  选择图片
                </el-button>
              </el-upload>
            </div>
            <div>
              <el-button @click="setVisible">取 消</el-button>
              <el-button type="primary" @click="getPic"> 确 定 </el-button>
            </div>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import "cropperjs/dist/cropper.css";
import Cropper from "cropperjs";

import { fileToBase64 } from "@/utils";
import { reactive, ref, nextTick } from "vue";
import { ElMessage } from "element-plus";
const image = ref(null);
const props = defineProps({
  limit: {
    type: Number,
    default: 1,
  },
  getPicFun: {
    type: Function,
    default: () => {},
  },
  delPicFun: {
    type: Function,
    default: () => {},
  },
  aspectRatio: {
    type: Number,
    default: 1,
  },
});
const state = reactive({
  image: "",
  visible: false,
  pics: [],
  cropper: null,
});

function setVisible() {
  state.visible = !state.visible;
}

function del(url, key) {
  if (props.limit == 1) {
    props.delPicFun(url, key);
    state.pics = [];
  } else {
    state.pics.splice(key, 1);
    props.delPicFun(url, key);
  }
  console.log(url, key);
}

function getPic() {
  if (!state.cropper) {
    ElMessage.error("请选择图片");
    return;
  }
  let res = state.cropper.getCroppedCanvas();
  let url = res.toDataURL("image/png");
  props.getPicFun(url);
  state.pics.push(url);
  setVisible();
}

function handleChange(file) {
  let _aspectRatio = props.aspectRatio;
  let _state = state;
  fileToBase64(file.raw, (url) => {
    state.image = url;

    nextTick(() => {
      _state.cropper = new Cropper(image.value, {
        autoCropArea: 1,
        aspectRatio: _aspectRatio,
        dragMode: "move",
        background: true,
        modal: true,
        guides: true,
        movable: true,
        resizable: false,
        zoomable: true,
      });
    });
  });
}
</script>
<style>
img {
  display: block;
  max-width: 100%;
}
.layer {
  display: none;
}
.box:hover .layer {
  display: block;
}
</style>
